import { Todo } from "@/model";
import React from "react";
import SingleTodo from "@/App/TodoList/SingleTodo";
import "./todoList.less";
interface Props {
    todos: Todo[];
    setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
}

const index: React.FC<Props> = ({ todos, setTodos }) => {
    return (
        <div className="container">
            <ul className="todos">
                <span className="todos__heading">Active Tasks </span>
                {todos.map((todo) => {
                    if (!todo.isDone) {
                        return (
                            <SingleTodo
                                todo={todo}
                                key={todo.id}
                                todos={todos}
                                setTodos={setTodos}
                            />
                        );
                    }
                })}
            </ul>
            <ul className="todos remove">
                <span className="todos__heading">Complete Tasks </span>
                {todos.map((todo) => {
                    if (todo.isDone) {
                        return (
                            <SingleTodo
                                todo={todo}
                                key={todo.id}
                                todos={todos}
                                setTodos={setTodos}
                            />
                        );
                    }
                })}
            </ul>
        </div>
    );
};

export default index;
